<template>
  <div>
    <customSearch ref="customSearch" placeholder="请输入企业名称" title="设备列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
    <div class="d-flex mt-2 w-100">
      <custom-radio-tag1 class="mb-1 w-100" :list="list" :value="activeIndex" is-scroll @change="tagChange" />
    </div>
    <div>
      <template v-if="active === '特种设备'">
        <div v-if="specialList.length>0" class="common_list">
          <div v-for="(item, index) in specialList" :key="index" class="list_item" @click="goToDetails(item)">
            <div class="content_area">
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  {{ item.companyName }}
                </div>
                <ul>
                  <li>
                    <i class="iconfont c-text-color1">&#xe7e5;</i>
                    <div class="label">设备名称：</div>
                    <div class="value">{{ item.deviceName }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color2">&#xe634;</i>
                    <div class="label">设备类别：</div>
                    <div class="value">{{ item.deviceType }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe87e;</i>
                    <div class="label">设备使用地点：</div>
                    <div class="value">{{ item.deviceAddr }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color4">&#xe685;</i>
                    <div class="label">投入使用日期：</div>
                    <div class="value">{{ item.putUseTime }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color5">&#xe685;</i>
                    <div class="label">下次检验日期：</div>
                    <div class="value d-flex">
                      {{ item.nextTime || '/' }}<van-tag v-if="item.nextTimeState !== '/'" class="ml-1" plain :type="item.nextTimeState === '临期' ? 'warning' : 'danger'" style="display: block">{{ item.nextTimeState }}</van-tag>
                    </div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color6">&#xe6d7;</i>
                    <div class="label">设计使用年限：</div>
                    <div class="value">{{ item.planUseYear }}<span v-if="item.planUseYearState" class="ml-1 van-tag van-tag--plain van-tag--danger" style="">{{ item.planUseYearState }}</span></div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </template>
      <template v-else-if="active === '其他设备（涉火设备）'">
        <div v-if="otherList.length>0" class="common_list">
          <div v-for="(item, index) in otherList" :key="index" class="list_item" @click="goToDetails(item)">
            <div class="content_area">
              <div class="number_order">{{ index +1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  {{ item.companyName }}
                </div>
                <ul>
                  <li>
                    <i class="iconfont c-text-color1">&#xe7e5;</i>
                    <div class="label">设备名称：</div>
                    <div class="value">{{ item.deviceName }}</div>
                  </li>
                  <!-- <li>
                    <i class="iconfont c-text-color2">&#xe634;</i>
                    <div class="label">设备种类：</div>
                    <div class="value">{{ item.deviceType }}</div>
                  </li> -->
                  <li>
                    <i class="iconfont c-text-color3">&#xe634;</i>
                    <div class="label">规格型号：</div>
                    <div class="value">{{ item.modelNum }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color4">&#xe87e;</i>
                    <div class="label">设备使用地点：</div>
                    <div class="value">{{ item.deviceAddr }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color5">&#xe685;</i>
                    <div class="label">投入使用日期：</div>
                    <div class="value">{{ item.putUseTime }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color6">&#xe6d7;</i>
                    <div class="label">设计使用年限：</div>
                    <div class="value">{{ item.planUseYear }}<span v-if="item.planUseYearState" class="ml-1 van-tag van-tag--plain van-tag--danger">{{ item.planUseYearState }}</span></div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </template>
      <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%', background: 'white' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <div class="customPopCheckbox">
            <div class="checkbox-title">设备名称</div>
            <el-input v-model="form.deviceName" placeholder="请输入设备名称" size="small" style="margin-bottom: 10px" />
          </div>
          <custom-timer title="投入使用日期" :is-interval="true" :start.sync="form.startTime" :end.sync="form.endTime" :picker-title="'请选择投入使用日期'" />

          <!-- <customPopCheckbox v-if="active === '特种设备'" :list="selectOptionAll['安全-设备类别']" :check-value.sync="form.deviceType" title="设备种类" /> -->

          <!-- <customPopCheckbox v-if="active === '其他设备（涉火设备）'" :list="selectOptionAll['设备设施管理-其他设备种类']" :check-value.sync="form.deviceType" title="设备种类" /> -->

          <!-- <customPopCheckbox :list="selectOptionAll['设备设施管理-其他设备种类']" :check-value.sync="form.deviceType" title="设备种类" /> -->
          <!--          <div class="checkbox-title">设备名称：</div>-->
          <!--          <el-input v-model="form.name" placeholder="请输入设备名称" size="small" clearable />-->
          <!--          <template v-if="active === '专家库'">-->
          <!--            <customPopCheckbox :list="selectOptionAll['报警状态']" :check-value.sync="form.eventType" title="学历" />-->
          <!--            <customPopCheckbox :list="selectOptionAll['报警级别']" :check-value.sync="form.alarmLevel" title="属性类别" />-->
          <!--            <customPopCheckbox :list="selectOptionAll['是否误报']" :check-value.sync="form.alarmStatus" title="专家类别" />-->
          <!--          </template>-->
          <!--          <template v-else-if="active === '安全管理人员'">-->
          <!--            <customPopCheckbox :list="selectOptionAll['报警状态']" :check-value.sync="form.eventType" title="学历" />-->
          <!--            <customPopCheckbox :list="selectOptionAll['报警级别']" :check-value.sync="form.alarmLevel" title="专职/兼职" />-->
          <!--            <customPopCheckbox :list="selectOptionAll['是否误报']" :check-value.sync="form.alarmStatus" title="是否取得注册安全工程师证书" />-->
          <!--          </template>-->
          <!--          <template v-else-if="active === '特种作业人员' || active === '特种设备作业人员'">-->
          <!--            <customPopCheckbox :list="selectOptionAll['报警状态']" :check-value.sync="form.eventType" title="学历" />-->
          <!--            <customPopCheckbox :list="selectOptionAll['报警级别']" :check-value.sync="form.alarmLevel" title="作业类别" />-->
          <!--          </template>-->
          <!--          <template v-else-if="active === '火工作业人员'" />-->
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { otherDeviceList, specialDeviceList } from '@/api/commonPage/facility'

export default {
  mixins: [commonList],
  data() {
    return {
      active: '特种设备',
      activeIndex: 0,
      form: {
        pageNum: 1,
        pageSize: 10,
        startTime: '',
        deviceName: '',
        companyName: '',
        companyIds: '-1',
        endTime: ''
      },
      list: [
        {
          label: '特种设备'
        },
        {
          label: '其他设备（涉火设备）'
        }
      ],
      current: '',
      specialList: [],
      otherList: []
    }
  },
  created() {
    this.initTag()
  },
  mounted() {
    const { current } = this.$route.query
    if (current) {
      this.current = current
    }
    this.companyList()
    console.log(this.selectOptionAll)
  },
  methods: {
    initTag() {
      const { current, active } = this.$route.query
      current ? this.current = current : ''
      active ? this.active = active : ''
      if (active) {
        const checkValueIndex = this.list.findIndex(val => val.label === active)
        this.activeIndex = checkValueIndex
        this.listFun = this.list.find(val => val.label === active).listFun
      }
    },
    tagChange(tagArg) {
      const { label } = tagArg.item
      this.active = label
      this.form.pageNum = 1
      this.resetSuperSearch()
      this.companyList(true)
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.companyList()
    },
    // 企业名称查询
    handleSearch(value) {
      this.form.companyName = value
      this.form.pageNum = 1
      this.companyList(true)
    },
    // 高级查询
    handleSuperSearch() {
      this.superSearch = false
      this.form.pageNum = 1
      this.companyList(true)
    },
    // 级联选择器选择变化
    cascadeChange(args) {
      this.form.industryType = args.selectedOptions[args.selectedOptions.length - 1].text || ''
    },
    // 重置
    resetSuperSearch() {
      const pageSize = this.form.pageSize
      const pageNum = this.form.pageNum
      Object.keys(this.form).forEach(val => {
        this.form[val] = ''
      })
      // 重置输入框查询
      this.$refs.customSearch.restore()
      this.form.pageSize = pageSize
      this.form.pageNum = pageNum
      this.form.companyIds = '-1'
    },
    // 跳转详情
    goToDetails(item) {
      const { examineId } = item
      this.$router.push({
        path: '/staging/facilityDetail',
        query: { examineId, current: this.current, active: this.active }
      })
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 获取企业列表数据
    async companyList(flag) {
      this.$refs.customLoadmore.loadStatus = true
      // this.layout.showLoading()
      const { status, data } = await (this.active === '特种设备' ? specialDeviceList : otherDeviceList)(this.form)
      if (status === 0 && data) {
        this.total = data.total
        this[this.active === '特种设备' ? 'specialList' : 'otherList'] = flag ? data.list : this[this.active === '特种设备' ? 'specialList' : 'otherList'].concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      // this.layout.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
.checkbox-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}
</style>
